<template>
  <div id="carousel-container">
    <div class="d-flex pt-2 pl-2">
      <span style="color:#5cd9e8">
        <!-- <icon name="chart-bar"></icon> -->
      </span>
      <div class="d-flex">
        <span class="fs-xl text mx-2">发放情况</span>
        <dv-decoration-3 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;"/>
      </div>
    </div>
    <dv-scroll-board class="scroll-board" :config="config"/>
  </div>
</template>

<script>
export default {
  name: 'carousel',
  props: {
    personnalDistStatiss: {
      type: Array,
      default: function () {
        return [];
      }
    }
  },
  data() {
    return {
      config: {
        // header: ['品类', '品牌', '商品', '数量', '金额'],
        data: [
          /* ['张文', '￥280,000.00', '2021-06-10 15:30'],
           ['李静', '￥58,000.10', '2021-06-11 15:30'],
           ['李诏中', '￥22,008.92', '2021-06-12 15:30'],
           ['文竹', '￥80,009.90', '2021-06-14 15:30'],
           ['李京泽', '￥52,000.20', '2021-06-15 15:30'],
           ['王文书', '￥28,000.90', '2021-06-16 15:30'],
           ['葛文献', '￥22,000.00', '2021-06-20 15:30'],
           ['李成', '￥26,000.90', '2021-06-22 15:30'],
           ['葛文斌', '￥2,000.90', '2021-06-29 15:30']*/
          // ['护肤品', '海飞丝', '洗发水','1','￥28.90']
        ],
        index: true,
        columnWidth: [30],
        align: ['center'],
        oddRowBGC: '',
        evenRowBGC: ''
      }
    }
  },
/*  watch() {
    personnalDistStatiss:Array
  },*/
  // created() {
  mounted() {
    let len = this.personnalDistStatiss.length;
    let i = 0;
    let data = [];
    this.$watch('personnalDistStatiss', res => {
      this.personnalDistStatiss = res;
      this.personnalDistStatiss.forEach(item => {
        i++;
        data.push([item.cbfmc, '' + item.distMoney, item.distTime]);
        if (len == i) {
          this.config.data = data;
        }
      })
    });
    this.personnalDistStatiss.forEach(item => {
      i++;
      data.push([item.cbfmc, '' + item.distMoney, item.distTime]);
      if (len == i) {
        this.config.data = data;
      }
    })
  }

}
</script>

<style lang="scss" scoped>
#carousel-container {
  padding: 0.25rem 0.125rem;
  border-radius: 0.0625rem;
  width: 100%;
  height: 100%;

  .text {
    color: #c3cbde;
    font-size: 0.2rem;
  }

  .scroll-board {
    padding: 0.125rem 0.125rem;
    height: 2.5rem;
    min-width: 3.75rem;
    // padding: 0.2rem 0.125rem;
  }
}
</style>
